<template>
  <input :class="{
    [$style['form-control']]: true,
    err
  }" :value="value" @input="input" @change="$emit('change',$event)" @keyup.enter="$emit('keyupEnter')" @keyup.esc="$emit('keyupEsc')">
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      defalut: ''
    },
    value: [String, Number],
    err: Boolean
  },
  methods: {
    input (e) {
      this.$emit('inputValue', e.target.value)
    },
    focus () {
      this.$el.focus()
    },
    selectAll () {
      let { $el } = this
      $el.selectionStart = 0
      $el.selectionEnd = $el.value.length
      $el.focus()
    }
  }
}
</script>

<style module>
.form-control {
  background-color: #ffffff;
  border: 1px solid #dcdcdc;
  /* border: 1px solid #0ace82; */
  padding: 0 4px;
  height: 20px;
  /* border-radius: 5px; */

  box-sizing: border-box;
  font-size: 14px;
  color:#767575;
  outline: none;
  &::placeholder {
    color: #b7b6b6;
  }
  &:focus {
      border-color: #0ace82;
  }
  &:global.err {
    border-color: #f00;
    color: #f00;
  }
}
</style>
